<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6" v-for="item in dataList" class="mt10">
        <Card :title="item.deviceName">
          <div class="card__body">
            <div class="tank">
              <img class="img" :src="tankImg" alt="" />
              <!-- <Jdt class="jdt"></Jdt> -->
            </div>
            <div class="shuju">
              <div class="list">
                <div class="label">液位：</div>
                <div class="value">{{ item.liquid }}</div>
              </div>
              <div class="list">
                <div class="label">温度：</div>
                <div class="value">{{ item.temperature }}</div>
              </div>
            </div>
          </div>
        </Card>
      </el-col>
    </el-row>
    <!-- <div class="page">
      <pagination
        v-if="pageForm.total > 0"
        :total="pageForm.total"
        v-model:page="pageForm.page"
        v-model:limit="pageForm.size"
        @pagination="changePage"
      />
    </div> -->
  </div>
</template>

<script setup>
import { apis as APIS } from "@/api/hdwarning/immediate.js";
import Card from "./components/card.vue";
import Jdt from "./components/jdt.vue";
import tankImg from "@/assets/images/tank.png";
import Line from "./components/Line.vue";
const pageForm = ref({
  page: 1,
  size: 12,
  total: 0,
});
const dataList = ref([]);
const changePage = () => {
  initData();
};
const initData = () => {
  APIS.sysDangerCard({
    pageNum: pageForm.value.page,
    pageSize: pageForm.value.size,
  }).then((res) => {
    dataList.value = res.data || res.rows;
  });
};

const outerVisible = ref(false);
const handleHis = (item) => {
  APIS.getHistoryData({
    databaseName: item.deviceName,
  });
};
onMounted(() => {
  initData();
});
</script>

<style lang="scss" scoped>
.mt10 {
  margin-top: 10px;
}

.card__body {
  display: flex;
  .shuju {
    position: relative;
    padding: 60px 0 0 30px;
    .list {
      display: flex;
      .label {
        width: 60px;
        font-weight: 600;
        line-height: 20px;
        margin-right: 20px;
      }
      .value {
        line-height: 20px;
      }
    }
  }
}
.tank {
  position: relative;
  width: 160px;
  height: 240px;
  .img {
    width: 130px;
    position: absolute;
    top: 20px;
    left: 20px;
  }
  .jdt {
    position: absolute;
    top: -22px;
    left: 10px;
  }
}
</style>
